function UserGreeting(props) {
    return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
    return <h1>Please sign up.</h1>;
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />;
    }
    return <GuestGreeting />;
}

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isLoggedIn: false};
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isLoggedIn: !prevState.isLoggedIn
        }));
    }

    render() {
        return (
            <div>
                <Greeting isLoggedIn={this.state.isLoggedIn}/>
                <button onClick={this.handleClick}>
                    {this.state.isLoggedIn ? 'Logout' : 'Login'}
                </button>
            </div>
        );
    }
}

ReactDOM.render(
    <Toggle />,
    document.getElementById('greeting')
);